<!--  -->
<template>
  <div>
    <div class="div_box_table">
      <table border="1" style="width: 100%" cellspacing="0" cellpadding="10">
        <thead>
        <tr>
          <template v-for="(cel,index) in headerData">
            <th v-if="cel.label === '考察项目'" rowspan="2">考察项目</th>
            <th v-else-if="cel.label === '全检用量'" rowspan="2">全检用量</th>
            <th v-else :colspan="cel.children.length">{{cel.label}}</th>
          </template>
        </tr>
        <tr>
          <template v-for="(cel,index) in headerData">
            <template v-if="cel.children.length > 0">
              <template v-for="col in cel.children">
                <th> {{col.label}}{{col.unit}}</th>
              </template>
            </template>
          </template>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(val,index) in tableData.tableData" :key="index + '2QQ'">
          <template v-for="(cel,index1) in headerData" >
            <td align="center" :key="index1+'cxcv'" v-if="cel.label === '考察项目'">{{val[cel.prop].inspect_project_name}}</td>
            <td align="center" v-else-if="cel.label === '全检用量'">
              <template v-if="val.name.inspect_project_name === '样品量'">
                <!--                {{totalTo(cel.prop)}}-->
                {{sample11}}
              </template>
              <template v-else>
                <span>
                  {{val[cel.prop].packaging_nu}}
                  {{val[cel.prop].packaging_nu_unit !== '' ? val[cel.prop].packaging_nu_unit :val[cel.prop].packaging_unit}}
                </span>
              </template>
            </td>
            <template v-if="cel.children.length > 0">
              <template v-for="(col,index2) in cel.children" >
                <td align="center" v-if="val.name.inspect_project_name === '样品量'" :key="col.prop">
                  <!--                  {{totalTo(col.prop,cel.label)}}-->
                  {{sample22}}
                </td>
                <td align="center" v-else :key="col.prop">
                  <span v-if="val[col.prop]">√</span>
                  <span v-else>/</span>
                </td>
              </template>
            </template>
          </template>
        </tr>
        <tr>
          <td align="center">总计</td>
          <td align="center" :colspan="handlCol()">
            <div v-if="totalof.length>1" style="display:flex;justify-content: center;align-items:center">
              <div v-for="(dex,ind) in totalof" :key="ind + 'xx'">
                <span>{{dex.value}}</span>
                <span v-if="dex.arrList.length > 1">
                   <span style="padding:0 5px">*</span>
                       {{dex.arrList.length}}
                 </span>
                <span v-if="ind < totalof.length - 1">+</span>
              </div>
              <div>
                = {{sumNum()}} {{totalof[0].unit || ''}}
              </div>
            </div>
            <div v-if="totalof.length ===1" style="display:flex;justify-content: center;align-items:center">
              <div>{{totalof[0].value}} * 1</div>
              <div><span> = {{sumNum()}}</span> <span>{{totalof[0].unit || ''}}</span></div>
            </div>
          </td>
        </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>

  export default {
    props: {
      tableHead: {
        type: Array,
        default: function() {
          return []
        }
      },
      tableList: {
        type: Object,
        default: function() {
          return {
            stability_sample_info: {
              sample_type_info: {
                inspect_projects: []
              }
            }
          }
        }
      },
      tableData: {
        type: Object,
        default: function() {
          return {
            tableData: [],
            combined: {},
            total: {}
          }
        }
      },
      stability: {
        type: Number,
        default: function() {
          return 0
        }
      }
    },
    data() {
      return {
        headerData: [
          {
            label: '考察项目',
            prop: 'name',
            children: []
          },
          {
            label: '全检用量',
            prop: 'num',
            children: []
          }
        ],
        index: undefined,
        ind: undefined,
        num: undefined,
        title: '',
        numIndex: 0,
        arr: {},
        dataList: [],
        projectData: [],
        openBoole: undefined,
        list: [],
        aaa: {
          boole: true,
          name: { inspect_project_name: '样品量' },
          num: {}
        },
        totalof: [],
        ssss: {},
        sample11: '',
        sample22: ''
      }
    },
    //是计算属性，也可以理解为一个方法。
    computed: {
      handlCol() {
        return function() {
          let num = 0
          for (let i = 0; i < this.headerData.length; i++) {
            let val = this.headerData[i]
            if (val.children.length > 0) {
              num += val.children.length
            }
          }
          return num + 1
        }
      }
    },
    //属性是手动定义的所需监听的值
    watch: {},
    //生命周期 - 创建完成（访问当前this实例）
    created() {
      console.log(this.tableData,"=--==-=-")
    },
    //生命周期 - 挂载完成（访问DOM元素）
    mounted() {
      this.headerData = this.headerData.concat(this.hanldTable(this.tableHead))
      for (let i = 0; i < this.headerData.length; i++) {
        let a = this.headerData[i].children
        this.totalTo(this.headerData[i].prop)
        if (a.length > 0) {
          for (let j = 0; j < a.length; j++) {
            this.totalTo(a[j].prop, this.headerData[i].label)
          }
        }
      }
      this.hanldList()
      this.handlTotal()
      this.handlSort()
      this.handlHead()
      this.hanldChange()

    },
    //是Vue实例对象上绑定的方法，供当前Vue组件作用域内使用，
    methods: {
      //处理样品量
      totalTo: function(prop, label) {
        let a, b
        if (prop === 'num') {
          let num1 = 0,
            un_unit1 = '',
            unit1 = '',
            num_nuit1 = undefined,
            total1 = 0

          for (let i = 0; i < this.tableData.tableData.length; i++) {
            if (this.tableData.tableData[i].num.packaging_nu !== undefined) {
              num1 += this.tableData.tableData[i].num.packaging_nu || 0
              un_unit1 = this.tableData.tableData[0].num.packaging_nu_unit || ''
              unit1 = this.tableData.tableData[0].num.packaging_unit || ''
              num_nuit1 = this.tableData.tableData[0].num.num_nuit
              if (num_nuit1 === 0 && un_unit1 === '') {
                a = `${num1} ${unit1}`
              } else {
                total1 = Math.ceil(num1 / num_nuit1) || 0
                a = `${num1} ${un_unit1} / ${total1} ${unit1}`
              }
            }
          }
          if (!this.tableData.combined.num) {
            this.tableData.combined.num = a
          }
          if (this.stability == 2) {
            return this.tableData.combined.num
          } else {
            this.tableData.combined.num = a
            return this.sample11 = a
          }
        } else {
          let num = 0,
            un_unit = '',
            unit = '',
            num_nuit = undefined,
            total = 0
          let asd = 0
          for (let i = 0; i < this.tableData.tableData.length; i++) {
            if (this.tableData.tableData[i][prop]) {
              asd++
              num += this.tableData.tableData[i].num.packaging_nu || 0
            }
            un_unit = this.tableData.tableData[0].num.packaging_nu_unit || ''
            unit = this.tableData.tableData[0].num.packaging_unit || ''
            num_nuit = this.tableData.tableData[0].num.num_nuit
            let ssa = asd ? 1 : 0
            total = Math.ceil(num / num_nuit) || ssa
            if (num_nuit === 0 && un_unit === '') {
              b = `${num} ${unit}`
            } else {
              b = `${num} ${un_unit} / ${total} ${unit}`
            }
          }
          if (!this.tableData.combined[prop]) {
            this.tableData.combined[prop] = b
          }
          if (!this.ssss[label]) {
            this.ssss[label] = []
          }
          if (total == Infinity) {
            total = num
          }
          let data = {
            val: total,
            prop: prop,
            unit: unit
          }
          let index = this.ssss[label].findIndex(a => a.prop == prop)
          if (index != -1) {
            this.ssss[label][index] = data
          } else {
            this.ssss[label].push(data)
          }
          if (this.stability == 2) {
            let cc
            if (this.tableData.combined[prop]) {
              cc = this.tableData.combined[prop]
            } else {
              cc = `1 ${un_unit} /1 ${unit}`
            }
            return this.sample22 = cc
          } else {
            this.tableData.combined[prop] = b
            return this.sample22 = b
          }
        }

      },

      //求和
      sumNum() {
        let num = 0
        for (let i = 0; i < this.totalof.length; i++) {
          num += this.totalof[i].value * this.totalof[i].arrList.length
        }
        return num
      },

      //处理表头
      hanldTable(arrData) {
        this.tableData.headList = []
        let aaa = [],
          data = {}
        for (let i = 0; i < arrData.length; i++) {
          if (!data[arrData[i].place_conditions.place_conditions_type.id]) {
            data[arrData[i].place_conditions.place_conditions_type.id] = [
              arrData[i]
            ]
          } else {
            data[arrData[i].place_conditions.place_conditions_type.id].push(
              arrData[i]
            )
          }
        }
        for (let key in data) {
          let str = '',
            ids = ''
          for (let j = 0; j < data[key].length; j++) {
            let dataVal = data[key][j]
            str += data[key][j].place_conditions.place_conditions_name
            ids +=
              data[key][j].place_conditions.place_conditions_type.id + '&?' +
              data[key][j].place_conditions.id
            if (j == data[key].length - 1) {
              let children = []
              for (
                let k = 0;
                k < dataVal.sample_point.sample_point_info.length;
                k++
              ) {
                let infoData = dataVal.sample_point.sample_point_info[k]
                let val = {
                  label: infoData.sample_point_num,
                  unit: infoData.sample_point_unit === 1 ? '天' : '月',
                  prop:
                    dataVal.place_conditions.place_conditions_type
                      .place_conditions_type_name +
                    '' +
                    '-' +
                    infoData.sample_point_num +
                    '-' +
                    infoData.sample_point_unit,
                  num: infoData.sample_point_unit,
                  children: []
                }
                children.push(val)
              }
              this.tableData.headList.push(dataVal.place_conditions.place_conditions_type
                .place_conditions_type_name)
              children = [...new Set(children)]
              aaa.push({
                label: str,
                ids: ids,
                prop:
                  data[key][0].place_conditions.place_conditions_type
                    .place_conditions_type_name + '',
                id: key,
                children: children
              })
            } else {
              str = str + '、'
              ids = ids + '、'
            }
          }
        }
        aaa = [...new Set(aaa)]
        return aaa
      },

      //添加取样点排序
      handlSort() {
        for (let i = 0; i < this.headerData.length; i++) {
          let arr = this.headerData[i].children
          if (arr.length > 0) {
            arr.sort((a, b) => {
              if (a.num === b.num) {
                return a.label - b.label
              } else {
                return a.num - b.num
              }
            })
          }
        }
      },

      //原数组取样点排序
      handlHead() {
        for (let i = 0; i < this.tableHead.length; i++) {
          let arr = this.tableHead[i].sample_point.sample_point_info
          if (arr.length > 0) {
            arr.sort((a, b) => {
              if (a.sample_point_unit === b.sample_point_unit) {
                return a.sample_point_num - b.sample_point_num
              } else {
                return a.sample_point_unit - b.sample_point_unit
              }
            })
          }
        }
      },

      //总计input
      handlTotal() {
        let list = []
        if (this.tableData.total.a !== undefined) {
          let index = this.tableData.total.a.findIndex(
            b => b.sample.id === this.tableList.id
          )
          if (index !== -1) {
            this.tableData.total.a[index].sample = this.tableList
            this.tableData.total.a[index].arrList.forEach(item => {
              item.sample = this.tableList
            })
          }
          list = this.tableData.total.a
          // this.totalof = this.tableData.total.a;
        } else {
          this.totalof = []
        }

        for (let i = 0; i < this.headerData.length; i++) {
          if (this.headerData[i].children.length > 0) {
            let value = 0
            let obj = null
            let arrList = []
            let labelArr = this.headerData[i].label.split('、')
            let idArr = this.headerData[i].ids.split('、')

            let aa = list.findIndex(a => a.ids == this.headerData[i].ids)
            if (aa != -1) {
              arrList = list[aa].arrList
              value = list[aa].value
            } else {
              for (let i = 0; i < labelArr.length; i++) {
                obj = {
                  name: labelArr[i],
                  id: idArr[i],
                  sample: this.tableList,
                  value: 0
                }
                arrList.push(obj)
              }
            }

            this.totalof.push({
              [this.headerData[i].ids]: this.headerData[i].ids.split('、'),
              value: value,
              unit: '',
              arrList: arrList,
              label: this.headerData[i].label,
              ids: this.headerData[i].ids,
              sample: this.tableList
            })
          }
        }
        this.tableData.total = { a: this.totalof }
      },

      //处理表的prop数据
      hanldList() {
        let arr = [],
          data = {}
        for (let i = 0; i < this.headerData.length; i++) {
          data[this.headerData[i].prop] = ''
          if (this.headerData[i].children.length > 0) {
            for (let j = 0; j < this.headerData[i].children.length; j++) {
              data[this.headerData[i].children[j].prop] = false
            }
          }
        }
        let inspect_projects = this.tableList.sample_type_info.inspect_projects
        for (let k = 0; k < inspect_projects.length; k++) {
          let a = {
            id: inspect_projects[k].id,
            inspect_project_name: inspect_projects[k].inspect_project_name
          }
          let b = {
            packaging_nu: this.tableList.packaging_nu,
            num_nuit: this.tableList.packaging_nu,
            packaging_nu_unit: this.tableList.packaging_nu_unit,
            packaging_unit: this.tableList.packaging_unit
          }
          data.name = a
          data.num = b
          data.boole = true
          arr.push({ ...data })
        }
        if (this.tableData.tableData.length === 0) {
          this.tableData.tableData = arr
          this.tableData.tableData.push(this.aaa)
        } else {
        }
      },

      //
      hanldChange(val) {

        setTimeout(_ => {
          for (let j = 0; j < this.totalof.length; j++) {
            this.totalof[j].value = 0
            if (this.ssss[this.totalof[j].label]) {
              let num = 0
              for (let k = 0; k < this.ssss[this.totalof[j].label].length; k++) {
                this.totalof[j].value += this.ssss[this.totalof[j].label][k].val
                this.totalof[j].unit = this.ssss[this.totalof[j].label][k].unit
                for (let i = 0; i < this.totalof[j].arrList.length; i++) {
                  this.totalof[j].arrList[i].value = this.totalof[j].value
                }
              }
              this.tableData.total = { a: this.totalof }
            }
          }
        }, 100)
      }

    }
  }
</script>
<style scoped lang="scss">
  .div_box_table {
    ::v-deep table {
      table-layout: auto !important;
    }

    ::v-deep .el-table__header-wrapper .el-table__header {
      width: 100% !important;
      table-layout: auto !important;
    }

    ::v-deep .el-table__body-wrapper .el-table__body {
      width: 100% !important;
      table-layout: auto !important;
    }

    ::v-deep .el-table th, .el-table td {
      word-wrap: normal !important;
      width: auto !important;
      word-break: break-all !important;
    }

    ::v-deep .el-table--border th, .el-table--border td {
      border-right: 1px solid #ebeef5 !important;
    }


    ::v-deep .item_form {
      overflow: hidden;
    }

    .zong {
      width: 100%;
      height: 48px;
      border: 1px solid #ebeef5;
      border-top: none;
      display: flex;
      align-items: center;
      box-sizing: border-box;
    }

    .left {
      width: 120px;
      height: 48px;
      border-right: 1px solid #ebeef5;
      box-sizing: border-box;
      line-height: 48px;
      padding-left: 20px;
      font-size: 14px;
      text-align: center;
    }

    .rigth {
      width: calc(100% - 120px);
    }

    ::v-deep .el-input-group__prepend {
      background-color: #ffffff;
    }

    ::v-deep .el-input-group__append {
      background-color: #ffffff;
    }

    ::v-deep .form-item .el-form-item__content {
      display: flex;
      justify-content: flex-start;
      /* width: 400px; */
    }

    ::v-deep .form-item {
      margin-bottom: 0px !important;
      padding: 0 10px;
    }


  }

</style>
